<template>
  <div class="dish">
    <div class="logout" @click="logout">
      <div class="logout-icon"></div>
      <div class="text">注销</div>
    </div>

    <div class="area">
      <div class="making-area-auto" ref="booking" style="marigin-top: 0">
        <div class="area-header booking-header-color">
           <div class="square" style="background-color:red"></div>
          <div class="header-content">17分钟一桌菜</div>
          <div style="margin-left:160px">
            <el-link    style="cursor: pointer;"  type="danger" :underline="false" @click="statDetail"
                >详情</el-link
              >
          </div>
        </div>
        <div>
          <div style="font-size: 14px;
    padding: 15px;">
            <p>1.今日<span style="color: red;"><b>超:</b></span>{{biData.bizTimeoutNum}}单-{{biData.kscTimeoutNum}}菜,占比{{biData.kscTimeoutPer}}%</p>
            <p style="margin-top:5px">2.今日<span style="color: red;"><b>均:</b></span>{{biData.kscTime}}分钟/菜，历史最优：{{biData.kscHisTime}}分钟/菜</p>
            <p style="margin-top:5px">3.今日<span style="color: red;"><b>总:</b></span>{{biData.bizNum}}单-{{biData.kscNum}}菜 </p>

          </div>
        </div>
      </div>
      <div class="making-area-auto" ref="booking">
        <div class="area-header booking-header-color" @click="refresh">
          <div class="square blue"></div>
          <div class="header-content">预定区</div>
        </div>
        <div class="booking-scroll">
          <div class="area-items">
            <div
              class="desk"
              v-for="(item, i) in bookingArea"
              v-bind:key="i"
              @click="showDetail(item.id)"
              :data-idx="i"
              :data-type="1"
            >
              <div class="desk-tag blue">
                <span class="desk-tag-text">预</span>
              </div>
              <div class="desk-detail">
                <div class="desk-number">{{ item.tableName }}</div>
                <div class="desk-time">预定{{ item.scheduleTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="making-area" ref="making">
        <div class="area-header making-header-color" @click="refresh">
          <div class="square yellow"></div>
          <div class="header-content">制作区</div>
        </div>
        <div class="making-scroll">
          <div class="area-items">
            <div
              v-for="(item, i) in makingArea"
              v-bind:key="i"
              @click="showDetail(item.id)"
            >
            <div v-if="item.callStatus==0">
              <div
                class="desk"
                v-if="
                  new Date().getTime() - new Date(item.callUpTime).getTime() <
                  780000
                "
              >
                <div class="desk-tag" :class="item.isJumped ? 'brown' : ''">
                  <span class="desk-tag-text">{{
                    item.isJumped ? "插" : ""
                  }}</span>
                </div>
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">{{ item.waitTime }}</div>
                </div>
              </div>
              <div
                class="desk circle-y"
                v-if="
                  new Date().getTime() - new Date(item.callUpTime).getTime() >
                    780000 &&
                  new Date().getTime() - new Date(item.callUpTime).getTime() <
                    1020000
                "
              >
                <div class="desk-tag" :class="item.isJumped ? 'brown' : ''">
                  <span class="desk-tag-text">{{
                    item.isJumped ? "插" : ""
                  }}</span>
                </div>
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">{{ item.waitTime }}</div>
                </div>
              </div>
              <div
                class="desk circle-r"
                v-if="
                  new Date().getTime() - new Date(item.callUpTime).getTime() >
                  1020000
                "
              >
                <div class="desk-tag" :class="item.isJumped ? 'brown' : ''">
                  <span class="desk-tag-text">{{
                    item.isJumped ? "插" : ""
                  }}</span>
                </div>
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">{{ item.waitTime }}</div>
                </div>
              </div>
            </div>
            <div v-if="item.callStatus==1">
              <div
                class="desk"
              >
                <div class="desk-tag" :class="item.isJumped ? 'brown' : ''">
                  <span class="desk-tag-text">{{
                    item.isJumped ? "插" : ""
                  }}</span>
                </div>
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">00分00秒</div>
                </div>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>

      <div class="waiting-area" ref="waiting" style="height: 200px">
        <div class="area-header waiting-header-color" @click="refresh">
          <div class="square light-green"></div>
          <div class="header-content">等待区</div>
        </div>
        <div class="waiting-scroll">
          <div class="area-items">
            <div
              v-for="(item, i) in waitingArea"
              v-bind:key="i"
              @click="showDetail(item.id)"
            >
            <div v-if="item.callStatus==0">
              <div
                class="desk"
                v-if="
                  new Date().getTime() - new Date(item.callUpTime).getTime() <
                  780000
                "
              >
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">{{ item.waitTime }}</div>
                </div>
              </div>
              <div
                class="desk circle-y"
                v-if="
                  new Date().getTime() - new Date(item.callUpTime).getTime() >
                    780000 &&
                  new Date().getTime() - new Date(item.callUpTime).getTime() <
                    1020000
                "
              >
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">{{ item.waitTime }}</div>
                </div>
              </div>

              <div
                class="desk circle-r"
                v-if="
                  new Date().getTime() - new Date(item.callUpTime).getTime() >
                  1020000
                "
              >
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">{{ item.waitTime }}</div>
                </div>
              </div>
              </div>
              <div v-if="item.callStatus==1">
                <div
                class="desk"
              >
                <div class="desk-detail">
                  <div class="desk-time">{{ item.tableName }}</div>
								<div class="desk-number">00分00秒</div>
                </div>
              </div>
                </div>
            </div>
          </div>
        </div>
      </div>

      <div class="button-box">
        <div class="cus-button" @click="viewHistory">
          <span class="button-content">配菜查询</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="finish-food" ref="cookOrFryList" style="min-height: 100px">
        <div class="list-header list-green" @click="refresh">
          <span class="list-content">【切配+加工】区</span>
        </div>
        <div class="food-items">
          <div
            class="food-item"
            v-for="(item, i) in allWindowList[0]"
            v-bind:key="i"
          >
            <div class="name">
              <b v-if="!item.allPrepared">{{ item.itemName }}</b
              ><span v-if="item.allPrepared">{{ item.itemName }}</span>
            </div>
            <div class="amount">
              <b v-if="!item.allPrepared">{{ "x" + item.count }}</b
              ><span v-if="item.allPrepared">{{ "x" + item.count }}</span>
            </div>
            <div class="seat">
              <div v-if="item.tableNames">
                <div v-for="(tableName, j) in item.tableNames" v-bind:key="j">
                  <div
                    class="seat-item"
                    :class="j == 1 ? 'item-margin-top' : ''"
                  >
                    <div>
                      <b v-if="!item.allPrepared">{{ tableName }}</b
                      ><span v-if="item.allPrepared">{{ tableName }}</span
                      ><span
                        v-if="
                          item.remarks[j] ||
                          (item.methods[j] && item.methods[j].length > 0)
                        "
                      >
                        （<span v-if="item.remarks[j]"
                          >{{ item.remarks[j] }} / </span
                        ><span v-for="(label, k) in item.methods[j]" :key="k"
                          ><span v-if="k > 0">|</span>{{ label }}</span
                        >）
                      </span>
                    </div>
                    <div v-if="item.isJumped[j]" class="seat-item-tag brown">
                      插
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="type">
              <div v-if="item.sourceTypes">
                <div v-for="(subItem, j) in item.sourceTypes" v-bind:key="j">
                  <div
                    class="seat-item"
                    :class="j == 1 ? 'item-margin-top' : ''"
                  >
                    {{ subItem == 1 ? "堂食" : "外卖" }}
                  </div>
                </div>
              </div>
            </div>
            <div class="time">
              <div v-if="item.shortOrderTimes">
                <div
                  v-for="(subItem, j) in item.shortOrderTimes"
                  v-bind:key="j"
                >
                  <div
                    class="time-item"
                    :class="j == 1 ? 'item-margin-top' : ''"
                  >
                    {{ "下单时间：" + subItem }}
                  </div>
                </div>
              </div>
            </div>
            <div class="action">
              <div v-for="(v, ki) in item.kscIds" v-bind:key="ki">
                <div
                  class="list-button"
                  @click.capture.stop="
                    prepareLine2(1, i, v, item.ksIdsPrepared[ki])
                  "
                  :style="
                    item.kscIds.length > 1 ? 'height:20px;margin-top:2px' : ''
                  "
                  :class="item.ksIdsPrepared[ki] ? 'list-button-disabled' : ''"
                >
                  <div class="list-button-content">配</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cooking-food" ref="cooking_food">
        <div class="list-header list-blue" @click="refresh">
          <span class="list-content">加工区</span>
        </div>

        <div
          class="food-items"
          v-if="
            allWindowList && allWindowList[1] && allWindowList[1].length > 0
          "
        >
          <div
            class="food-item"
            v-for="(item, i) in allWindowList[1]"
            v-bind:key="i"
          >
            <div class="name">
              <b v-if="!item.allPrepared">{{ item.itemName }}</b
              ><span v-if="item.allPrepared">{{ item.itemName }}</span>
            </div>
            <div class="amount">
              <b v-if="!item.allPrepared">{{ "x" + item.count }}</b
              ><span v-if="item.allPrepared">{{ "x" + item.count }}</span>
            </div>
            <div class="seat">
              <div v-if="item.tableNames">
                <div v-for="(tableName, j) in item.tableNames" v-bind:key="j">
                  <div
                    class="seat-item"
                    :class="j == 1 ? 'item-margin-top' : ''"
                  >
                    <div>
                      <b v-if="!item.allPrepared">{{ tableName }}</b
                      ><span v-if="item.allPrepared">{{ tableName }}</span
                      ><span
                        v-if="
                          item.remarks[j] ||
                          (item.methods[j] && item.methods[j].length > 0)
                        "
                      >
                        （<span v-if="item.remarks[j]"
                          >{{ item.remarks[j] }} / </span
                        ><span v-for="(label, k) in item.methods[j]" :key="k"
                          ><span v-if="k > 0">|</span>{{ label }}</span
                        >）
                      </span>
                    </div>
                    <div v-if="item.isJumped[j]" class="seat-item-tag brown">
                      插
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="type">
              <div v-if="item.sourceTypes">
                <div v-for="(subItem, j) in item.sourceTypes" v-bind:key="j">
                  <div
                    class="seat-item"
                    :class="j == 1 ? 'item-margin-top' : ''"
                  >
                    {{ subItem == 1 ? "堂食" : "外卖" }}
                  </div>
                </div>
              </div>
            </div>
            <div class="time">
              <div v-if="item.shortOrderTimes">
                <div
                  v-for="(subItem, j) in item.shortOrderTimes"
                  v-bind:key="j"
                >
                  <div
                    class="time-item"
                    :class="j == 1 ? 'item-margin-top' : ''"
                  >
                    {{ "下单时间：" + subItem }}
                  </div>
                </div>
              </div>
            </div>
            <div class="action">
              <div v-for="(v, ki) in item.kscIds" v-bind:key="ki">
                <div
                  class="list-button"
                  @click.capture.stop="
                    prepareLine2(1, i, v, item.ksIdsPrepared[ki])
                  "
                  :style="
                    item.kscIds.length > 1 ? 'height:20px;margin-top:2px' : ''
                  "
                  :class="item.ksIdsPrepared[ki] ? 'list-button-disabled' : ''"
                >
                  <div class="list-button-content">配</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="waiting-food" :style="{ height: waitingFoodHeight + 'px' }">
        <div class="list-header list-gray" @click="refresh">
          <span class="list-content">等待区</span>
        </div>
        <div
          class="waiting-item-scroll"
          :style="{ height: waitingFoodHeight + 'px' }"
        >
          <div class="food-items">
            <div
              class="food-item"
              v-for="(item, i) in waitingList"
              v-bind:key="i"
            >
              <div class="name">{{ item.itemName }}</div>
              <div class="amount">
                {{ item.lastQty ? "x" + item.lastQty : "" }}
              </div>
              <div class="seat">
                <div class="seat-item">
                  {{ item.tableName }}
                  <span
                    v-if="
                      item.remark || (item.method && item.method.length > 0)
                    "
                  >
                    （<span v-if="item.remark">{{ item.remark }} / </span
                    ><span v-for="(label, j) in item.method" :key="j"
                      ><span v-if="j > 0"> | </span>{{ label }}</span
                    >）
                  </span>
                  <div v-if="item.isJumped" class="seat-item-tag brown">插</div>
                </div>
              </div>
              <div class="type">
                {{
                  item.sourceType === 1
                    ? "堂食"
                    : item.sourceType === 2
                    ? "外卖"
                    : "零售"
                }}
              </div>
              <div class="time">
                <div class="time-item">
                  {{ "下单时间：" + item.shortOrderTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="detailVisible"
      v-if="detailVisible"
      center
      top="8vh"
      width="800px"
      custom-class="dialog-box"
    >
      <div
        v-if="detailInfo.remark"
        style="
          color: red;
          text-align: left;
          font-size: 16px;
          margin-left: 40px;
          margin-top: -30px;
        "
      >
        整单备注：{{ detailInfo.remark }}
      </div>
      <div class="dialog-items">
        <div
          class="dialog-item"
          v-for="(item, i) in detailInfo.list"
          v-bind:key="i"
        >
          <div class="dialog-item-name">
            {{ item.itemName }}
            <span v-if="item.method && item.method.length > 0">
              （<span v-for="(label, j) in item.method" :key="j"
                ><span v-if="j > 0"> | </span>{{ label }}</span
              >）
            </span>
          </div>
          <div class="dialog-item-amount">
            {{ item.lastQty ? "x" + item.lastQty : "" }}
          </div>
          <div
            class="dialog-item-status"
            v-if="item.status == 1"
            style="color: red"
          >
            {{ item.statusName }}
          </div>
          <div
            class="dialog-item-status"
            v-else-if="item.status == 2"
            style="color: orange"
          >
            {{ item.statusName }}
          </div>
          <div class="dialog-item-status" v-else>{{ item.statusName }}</div>
          <div class="dialog-item-time">下单时间：{{ item.orderTimeStr }}</div>
        </div>
      </div>

      <div slot="title" class="dialog-title">{{ dialogTitle }}<b>（{{detailInfo.list[1].sscount}}人）</b></div>
      <div slot="footer" class="dialog-footer">
        <!-- {{detailInfo.list[0].sscount}} -->
        <div class="dialog-button button-dark" @click="setBooking">
          <span class="dialog-button-text white">设置预定</span>
        </div>
        <div class="dialog-button" @click="detailVisible = false">
          <span class="dialog-button-text">退出</span>
        </div>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="scheduleVisible" width="600px">
      <div class="dialog-items">
        <el-radio-group v-model="scheduleInfo.scheduled">
          <div class="radio-box">
            <div class="radio-item">
              <el-radio :label="true" class="radio">预定时间：</el-radio>
            </div>
            <div class="time-item">
              <el-select
                v-model="scheduleInfo.hours"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option
                  v-for="(index, item) in 24"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="scheduleInfo.minutes"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option
                  v-for="(index, item) in 60"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="radio-box">
            <el-radio :label="false">取消预定</el-radio>
          </div>
        </el-radio-group>
      </div>
      <div slot="title" class="dialog-title">预定设置</div>
      <div slot="footer" class="dialog-footer">
        <div
          class="dialog-button setting-button"
          @click="scheduleVisible = false"
        >
          <span class="dialog-button-text">取消</span>
        </div>
        <div
          class="dialog-button setting-button button-dark"
          @click="saveBooking"
        >
          <span class="dialog-button-text white">确认</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import websocketUtil from "../websocketUtil.js";
import api from "../api.js";
import util from "../util.js";
// import { Table as MyTable  } from 'element-ui';
let intervalId;

export default {
  // components:{MyTable},
  data () {
    return {
      activeName:'first',
      bookingArea: [],
      makingArea: [],
      waitingArea: [],
      allWindowList: [[], []],
      waitingList: [],
      waitingHeight: 292,
      waitingFoodHeight: 292,
      detailVisible: false,
      scheduleVisible: false,
      statDetailVisible: false,
      detailBsId: null,
      scheduleInfo: {},
      dialogTitle: "",
      detailInfo: [],
      goalTime: "",
      minTime: "09:00",
      gridData: [],
      biData:{},
      normalData: [],
      timeOutData:[],
      myInterval:null,
      dialogTableVisible: false,
    };
  },
  mounted: function () {
    // please call these method to calculate waiting-area height when data change
    this.getWaitingHeight();
    this.getWaitingListHeight();

    window.localStorage.setItem("homepage", "prepare");
    this.curUser = util.getCurLoginUser();
    websocketUtil.connectWebSocket([
      {
        key: api.WS_REFRESH_PREPARE,
        action: this.refresh,
      },
    ]);
    this.refresh();
    // this.getBiData();
    intervalId = setInterval(this.refreshWaitTime, 1000);
    this.myInterval =setInterval( this.getBiData,5000)
  },

  destroyed: function () {
    console.log("销毁")
    websocketUtil.disconnectWebSocket();
    clearInterval(intervalId);
    clearInterval(this.myInterval)
  },
  beforeDestroy() {
    console.log("销毁函数")
    // clearInterval(this.intervalId)
  },
  methods: {
    getBiData(){
          util.request(this,api.getBizOrderBi,{},"GET").then(res=>{
          this.biData=res.data
          console.log("resres", this.biData)
        })

    },
    getWaitingHeight: function () {
      this.waitingHeight =
        768 -
        8 * 2 -
        60 -
        this.$refs.booking.offsetHeight -
        this.$refs.making.offsetHeight;
    },
    getWaitingListHeight: function () {
      let cookOrFryListHeight = this.$refs.cookOrFryList
        ? this.$refs.cookOrFryList.offsetHeight
        : 0;
      if (cookOrFryListHeight > 0) cookOrFryListHeight += 12;
      this.waitingFoodHeight =
        768 - 44 - cookOrFryListHeight - this.$refs.cooking_food.offsetHeight;
    },

    logout: function () {
      util.logout();
      this.$router.replace({
        name: "login",
      });
    },

    refresh: function () {
      this.queryOrderInfo();
      this.queryWindowItems();
      this.queryWaitingItems();
    },
    statDetail: function () {
      this.$router.push({
					path: "test"
				});
      // this.dialogTableVisible = true;
      // util
      //   .request(
      //     this,
      //    "/v2/{shopId}/histories/ksc?needException=false",
      //     {
      //       needException: false,
      //     },
      //     "GET"
      //   )
      //   .then((res) => {
      //     this.normalData=res.data
      //   })
      //   .catch((err) => {
      //     this.$message.error(err.data.errmsg);
      //   });
      //   util
      //   .request(
      //     this,
      //    "/v2/{shopId}/histories/ksc?needException=true",
      //     {
      //       needException: true,
      //     },
      //     "GET"
      //   )
      //   .then((res) => {
      //     this.timeOutData=res.data
      //   })
      //   .catch((err) => {
      //     this.$message.error(err.data.errmsg);
      //   });
    },
    queryOrderInfo: function () {
      util
        .request(
          this,
          api.GetOrderInfos,
          {
            needPrepared: true,
          },
          "GET"
        )
        .then((res) => {
          this.bookingArea = res.data.booking;
          this.makingArea = res.data.making;
          this.waitingArea = res.data.waiting;
          console.log(res.data);
          this.$nextTick(this.getWaitingHeight);
        })
        .catch((err) => {
          this.$message.error(err.data.errmsg);
        });
    },

    queryWindowItems: function () {
      let windowCount = 2;
      let allWindowList = [[], []];
      let resultCount = 0;
      for (let i = 0; i < windowCount; i++) {
        util
          .request(
            this,
            api.GetWindowItems,
            {
              index: i,
            },
            "GET"
          )
          .then((res) => {
            let windowList = res.data ? res.data : [];
            windowList.forEach((item) => {
              if (item.orderTimes) {
                item.shortOrderTimes = [];
                item.orderTimes.forEach((orderTime) => {
                  item.shortOrderTimes.push(util.dateTimeToTime(orderTime));
                });
              }
            });
            allWindowList[i] = windowList;
            resultCount++;
            if (resultCount >= windowCount) {
              this.allWindowList = [];
              allWindowList.forEach((item) => this.allWindowList.push(item));
              this.$nextTick(this.getWaitingListHeight);
            }
          })
          .catch((err) => {
            this.$message.error(err.data.errmsg);
          });
      }
    },

    queryWaitingItems: function () {
      util
        .request(this, api.GetWaitingItems, {}, "GET")
        .then((res) => {
          let waitingList = res.data ? res.data : [];
          waitingList.forEach((item) => {
            item.shortOrderTime = util.dateTimeToTime(item.orderTime);
          });
          this.waitingList = waitingList;
        })
        .catch((err) => {
          this.$message.error(err.data.errmsg);
        });
    },
    detailAllPrepared: function () {
      let allPrepared = true;
      let whiteList = [
        "5992900000000000005",
        "5992900000000001627",
        "5992900000000002112",
      ];
      this.detailInfo.list.forEach((item) => {
        if (item.status == 1 || whiteList.includes(item.itemId)) {
          allPrepared = false;
        }
      });
      return allPrepared;
    },
    setBooking: function () {
      if (!this.detailBsId) return;

      if (
        !this.detailInfo ||
        !this.detailInfo.list ||
        this.detailInfo.list.length < 1
      ) {
        this.$message.warning("无订单详情！");
        return;
      }

/**       if (this.detailAllPrepared()) {
        this.$message.error("该订单已全部配菜，无法预定！");
        return;
      }**/

      util
        .request(this, api.GetOrderSchedule, { bsId: this.detailBsId }, "GET")
        .then((res) => {
          this.scheduleInfo = res.data;
          this.scheduleInfo.scheduled = true;
          var date = new Date();
          date.setMinutes(date.getMinutes() + 17);
          // var bookTime = date.getHours() + ":" + date.getMinutes();
          this.scheduleInfo.hours = date.getHours();
          this.scheduleInfo.minutes = util._normalizeNumber(date.getMinutes());
          // this.scheduleInfo.time = bookTime;
          this.scheduleVisible = true;
        })
        .catch((err) => {
          this.$message.error(err.data.errmsg);
        });
    },

    saveBooking: function () {
      let message = this.scheduleInfo.scheduled
        ? "确认保存该订单为预定吗？"
        : "确认取消该订单预定吗？";
      if (!confirm(message)) return;
      this.scheduleInfo.time =
        util._normalizeNumber(this.scheduleInfo.hours) +
        ":" +
        util._normalizeNumber(this.scheduleInfo.minutes);
      util
        .request(this, api.SaveOrderSchedule, this.scheduleInfo, "POST")
        .then(() => {
          this.scheduleVisible = false;
          this.detailVisible = false;
        })
        .catch((err) => {
          this.$message.error(err.data.errmsg);
        });
    },
    refreshWaitTime: function () {
      if (this.bookingArea) {
        let temp = [].concat(this.bookingArea);
        temp.forEach((item) => {
          item.waitTime = util.calcWaitTime(item.orderTime);
        });
        this.bookingArea = temp;
      }
      if (this.makingArea) {
        let temp = [].concat(this.makingArea);
        temp.forEach((item) => {
          item.waitTime = util.calcWaitTime(item.callUpTime, true);
        });
        this.makingArea = temp;
      }
      if (this.waitingArea) {
        let temp = [].concat(this.waitingArea);
        temp.forEach((item) => {
          item.waitTime = util.calcWaitTime(item.callUpTime, true);
        });
        this.waitingArea = temp;
      }
    },

    showDetail: function (bsId) {
      this.detailBsId = bsId;
      this.dialogTitle = "";
      util
        .request(
          this,
          api.GetOrderDetail,
          {
            bsId: bsId,
          },
          "GET"
        )
        .then((res) => {
          if (res.data.list) {
            res.data.list.forEach((item) => {
              if (item.status == 1) {
                item.statusName = "待配";
              } else if (item.status == 2) {
                item.statusName = "待传";
              } else if (item.status == 3) {
                item.statusName = "完成";
              } else {
                item.statusName = "  ";
              }
            });
          }
          this.detailInfo = res.data;
          if (res.data.list && res.data.list.length > 0) {
            this.dialogTitle = res.data.list[0].tableName;
          }
          this.detailVisible = true;
        })
        .catch((err) => {
          this.$message.error(err.data.errmsg);
        });
    },

    prepareLine: function (windowIndex, row) {
      let windowList = this.allWindowList[windowIndex];
      let thisItem = windowList[row];
      console.log(thisItem);
      let thisPrepared = !thisItem.allPrepared;
      //如下提示看，只对窗口项目超过一条的进行（防止多条之间点错）
      if (windowList.length > 1) {
        let preparedCount = 0;
        windowList.forEach((item) => {
          if (item.allPrepared) preparedCount++;
        });
        //如果是最后一个完成配菜，需要提醒确认
        if (thisPrepared && preparedCount == windowList.length - 1) {
          if (!confirm("这是最后一个菜，保存后不能取消哦！确认保存吗？")) {
            return;
          }
        }
      }

      let data = {
        kscIds: thisItem.kscIds.join(","),
        prepared: thisPrepared,
      };
      console.log("data", data);
      // util.request(this, api.SavePrepareByList, data, "PUT")
      // 	.then(() => {})
      // 	.catch(err => {
      // 		this.$message.error(err.data.errmsg);
      // 	})
    },

    prepareLine2: function (windowIndex, row, item, prepared) {
      let thisPrepared = !prepared;
      //如下提示看，只对窗口项目超过一条的进行（防止多条之间点错）
      // if (windowList.length > 1) {
      // 	let preparedCount = 0;
      // 	windowList.forEach(item => {
      // 		if (item.allPrepared) preparedCount++;
      // 	});
      // 	//如果是最后一个完成配菜，需要提醒确认
      // 	if (thisPrepared && (preparedCount == windowList.length - 1)) {
      // 		if (!confirm("这是最后一个菜，保存后不能取消哦！确认保存吗？")) {
      // 			return;
      // 		}
      // 	}
      // }

      let data = {
        kscIds: item,
        prepared: thisPrepared,
      };
      console.log("data", data);
      util
        .request(this, api.SavePrepareByList, data, "PUT")
        .then(() => {})
        .catch((err) => {
          this.$message.error(err.data.errmsg);
        });
    },

    viewHistory: function () {
      this.$router.push({
        name: "preparehist",
      });
    },
  },
};
</script>

<style lang="css" scoped>
@import "~@/assets/css/pass-and-dish.css";
@import "~@/assets/css/common.css";
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.circle-r {
  background-color: #f58f98;
  animation: blink 1s infinite;
}
.circle-y {
  background-color: yellow;
  animation: blink 1s infinite;
}
</style>
